<template>
  <div>
    <Headers></Headers>
    <!-- 题头 -->
    <div class="he">
      <span v-for="d in deta">
        <router-link :to="'/pin'+d.id">#{{d.name}} </router-link>
      </span>
    </div>
    <!-- 列表 -->
    <div class="me">
      <div class="box" v-for="b in bloglist">
        <img class="mg1" :src="b.photo.path" />
        <h4> {{b.msg}}</h4>
        <p>★ {{b.favorite_count}}</p>
      </div>
    </div>
  
  </div>
</template>

<script>
import Headers from '../components/Headers'
export default {
  components:{
    Headers
  },
  data: function () {
    return {
      deta: [],
      bloglist: []
    }
  },
  mounted: function () {
    this.requestDetail()
    this.requestbloglist()
  },
  methods: {
    requestDetail: function () {
      // console.log(123)
      this.$http.get("dt/napi/category/detail/", {
        params: {
          app_version: "14",
          app_code: "mdt",
          category_id: "5017d172705cbe10c0000003"
        }
      })
        .then(function (res) {
          // console.dir(res.data.data.sub_cates)
          this.deta = res.data.data.sub_cates
        }.bind(this))

    },
    requestbloglist: function () {
      this.$http.get("dt/napi/blog/list/by_category/?", {
        params: {
          start: 0,
          include_fields: " sender, album, like_count, msg",
          limit: 24,
          cate_key: "5017d172705cbe10c0000003",
          path: '',
          _: 1497361285632
        }
      })
        .then(function (res) {
          console.dir(res.data.data.object_list)
          this.bloglist = res.data.data.object_list
        }.bind(this))
    }
  }
}
</script>

<style scoped>
.he {
  height: 150px;
  background-color: #9F9F9F;
  text-align: center;
  line-height: 20px;
  box-sizing: border-box;
  padding: 10px;
}

.he span {
  border: 1px solid white;
  border-radius: 5px;
  padding:8px 3px;
  margin:10px 5px 5px 5px;   
}
a{
  padding: 10px;
  color: white;
  line-height: 50px;
  text-decoration: none;
}

.mg1 {
  height: 150px;
}

.me {
  /*padding: 5px;*/
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 49%;
  background-color: white;
  margin-right: 1%;
  text-align: center;
}
</style>
